<template>
    <div>
        <i-input icon="search" placeholder="请输入..." style="width: 200px;cursor:pointer;" @on-click="search(searchText)" v-model="searchText"></i-input>
        <Button type="primary" @click="modelTrue">添加产品</Button>
        <Button type="error" @click="confirm">删除多个产品</Button>
        <Modal 
            width="700"
            v-model="modal"
            title="添加产品">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="Name" prop="name">
                    <Input type="text" v-model="formValidate.name"></Input>
                </FormItem>
                <FormItem label="Price" prop="price">
                    <Input type="text" v-model="formValidate.price"></Input>
                </FormItem>
                <FormItem label="Count" prop="count">
                    <Input  v-model="formValidate.count"></Input>
                </FormItem>
                <FormItem label="Img" prop="img">                  
                    <quill-editor :content="content"
                        :options="editorOption"
                        @change="onEditorChange($event)">
                    </quill-editor>          
                </FormItem>
                <FormItem label="Intro" prop="intro">
                    <Input type="text" v-model="formValidate.intro"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>

        <Table border ref="selection" :columns="columns" :data="data" @on-selection-change="addSelectData($event)"></Table>
        <Page :total="total" :current="page" size="small" show-elevator show-sizer @on-change="pageChange($event)" @on-page-size-change="pageSizeChange($event)"></Page>
    </div>
</template>
<script>
    import { quillEditor } from 'vue-quill-editor';
    import axios from "axios";
    export default {
        data () {
            return {
                type:"",
                data: [], 
                selectData:[],
                modal: false,
                mComfirm:false,
                limit:10,
                page:1,
                total:10,
                searchText:'',
                content: '', 
                editorOption: {
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Price',
                        key: 'price'
                    },
                    {
                        title: 'Count',
                        key: 'count'
                    }, 
                    {   width:136,
                        title: 'Img',
                        key: 'img',
                        type:'html',
                        className:'imgstyle',
                    },
                    {
                        title: 'Intro',
                        key: 'intro'
                    },
                    {
                        title: 'Date',
                        key: 'date'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.type="change";
                                            this.modal=true;
                                            this.formValidate={...(this.data[params.index])};
                                            this.content=this.data[params.index].img;
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                formValidate: {
                    name: '',
                    price:'',
                    count:'',
                    img: '',
                    intro: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: 'The price cannot be empty', trigger: 'blur' }
                    ],
                    count: [
                        { required: true, message: 'The count cannot be empty', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: 'The price cannot be empty', trigger: 'blur' }
                    ],
                    intro: [
                        { required: true, message: 'The intro cannot be empty', trigger: 'blur' }
                    ],
                   
                }
            }
        },
        components: {
            quillEditor,
        },
        methods: {
            remove (index) {
                if(this.data.length==1&&this.page!=1){
                    this.page-=1
                }
                var id=this.data[index]._id;
                axios.delete(`http://10.31.160.22:3000/product/data/${id}`)
                .then(res=>{
                    //console.log(res)
                    this.$Message.success({
                        content: '删除成功'
                    });
                
                    this.getProDate();
                });
            },
            search(){
                axios.post("http://10.31.160.22:3000/product/list",{name:this.searchText,limit:this.limit,page:1}).then(res=>{
                    console.log(res);
                    this.data=res.data.docs;
                    this.total=res.data.total;
                    this.page=res.data.page;
                });            
            },
            modelTrue(){
                this.modal=true;
                this.type="create";
                this.handleReset('formValidate');
            },
            confirm () {
                this.$Modal.confirm({
                    title: '确认框',
                    content: '<p>确认删除？</p>',
                    onOk: () => {
                        if(this.selectData.length==0){
                            this.$Message.info('选中为空！');
                            return;
                        }
                        this.manyDelete();
                    },
                    onCancel: () => {
                         if(this.selectData.length==0){
                            this.$Message.info('选中为空！');
                            return;
                        }
                        this.$Message.info('取消删除');
                    }
                });
            },
            pageChange(event){
                //console.log(event);
                this.page=event;
                this.getProDate();
            },
            pageSizeChange(event){
                this.limit=event;
                this.getProDate();
            },
            getProDate(){
                axios.post("http://10.31.160.22:3000/product/list",{limit:this.limit,name:this.searchText,page:this.page}).then(res=>{
                    //console.log(res);
                    this.data=res.data.docs;
                    this.total=res.data.total;
                    this.page=res.data.page;
                });
            },
            manyDelete(){
                var selectDataID=[];     
                for(var i=0;i<this.selectData.length;i++){
                    selectDataID.push(this.selectData[i]._id);
                }
                //console.log(selectDataID)
                if(this.data.length==selectDataID.length&&this.page!=1){
                    this.page-=1
                }
                axios.post("http://10.31.160.22:3000/product/manydata/delete",{id:selectDataID}).then(res=>{
                    this.$Message.success({
                        content: '删除成功'
                    })
                    this.getProDate();
                });
                
            },
            addSelectData(event){
              this.selectData=event;
            },

            handleSubmit (name) {
                this.$refs[name].validate((valid,value) => {
                    if (valid) {
                        if(this.type=='create'){
                            axios.post("http://10.31.160.22:3000/product/data",this.formValidate).then(res=>{
                                this.$Message.success('添加成功');
                                this.handleReset(name)
                                this.modal=false; 
                                this.getProDate();
                            })
                        }
                        if(this.type=='change'){
                            console.log(this.formValidate);
                            console.log('change')
                            axios.put(`http://10.31.160.22:3000/product/data/${this.formValidate._id}`,this.formValidate).then(res=>{
                                this.$Message.success("修改成功");
                                this.modal=false;
                                this.getProDate();
                            })
                        } 
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();                
                //console.log(this.content);
                this.content='';//清空编辑器中的内容
            },
            onEditorChange({ quill, html, text }) {
                this.content = html;
                this.formValidate.img=html;
                // console.log(html)
            }
        },
        created(){
            this.getProDate();
        }
    }
</script>
<style lang="scss">
    .ivu-table-wrapper{
        margin:10px 0;
    }
    .imgstyle{
        padding:7px 0 ;
        span{
            display:block;
            img{
                width:100px;
                height:100px;
                display:block;
            }
        }
    }
</style>